<!-- 修改后 -->
<template>
  <div class="container-bg">
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        width="600px"
        :model="form"
        size="medium"
        label-width="100px"
        style="max-width: 1200px"
      >
        <el-row v-if="false">
          <el-col :span="12">
            <el-form-item label="IP显示">
              <el-switch
                v-model="form.iIpDisplay"
                :active-value="activeValue"
                :inactive-value="inActiveValue"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="版本号">
              <el-switch
                v-model="form.iShowVersion"
                :active-value="activeValue"
                :inactive-value="inActiveValue"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="false">
          <el-col :span="12">
            <el-form-item label="时间显示">
              <el-switch
                v-model="form.iTime"
                :active-value="activeValue"
                :inactive-value="inActiveValue"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="ID/SN">
              <el-switch
                v-model="form.iShowDeviceID"
                :active-value="activeValue"
                :inactive-value="inActiveValue"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="false">
          <el-col :span="12">
            <el-form-item label="日期显示">
              <el-switch
                v-model="form.iDateDisplay"
                :active-value="activeValue"
                :inactive-value="inActiveValue"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="标题显示">
              <el-switch
                v-model="form.iTitleDisplay"
                :active-value="activeValue"
                :inactive-value="inActiveValue"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="false">
          <el-col :span="12">
            <el-form-item label="LOGO显示">
              <el-switch
                v-model="form.iLogoDisplay"
                :active-value="activeValue"
                :inactive-value="inActiveValue"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标题">
              <el-input v-model="form.sTitle"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="false">
          <el-col :span="12">
            <el-form-item label="LOGO">
              <uploadImg
                @handleUploadChange="handlesLogoPathChange"
                :imgUrl="form.sLogoPath"
              ></uploadImg>
              <el-alert title="支持 jpg、png格式" type="info" :closable="false" style="width: 80%;"></el-alert>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开机画面">
              <uploadImg
                @handleUploadChange="handlesStartupLogoPathChange"
                :imgUrl="form.sStartupLogoPath"
              ></uploadImg>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开机画面显示">
              <el-switch
                v-model="form.iStartupLogoDisplay"
                :active-value="activeValue"
                :inactive-value="inActiveValue"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="名字脱敏">
              <!-- <el-switch
                v-model="form.iNameMasked"
                :active-value="activeValue"
                :inactive-value="inActiveValue"
              /> -->

              <el-select
                v-model="form.iNameMasked"
                placeholder="请选择名字脱敏"
              >
                <el-option label="关" :value="0"></el-option>
                <el-option label="只显示姓" :value="1"></el-option>
                <el-option
                  label="只显示姓和最后一个名"
                  :value="2"
                ></el-option>
                <el-option label="完全不显示" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="false">
            <el-form-item label="显示菜单">
              <el-select
                v-model="form.showMenuButton"
                placeholder="请选择显示菜单"
              >
                <el-option label="不显示" :value="0"></el-option>
                <el-option label="显示" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import {
  getUIcontrolApi,
  editUIcontrolApi,
  editUILogoApi,
  editStartupLogoApi,
} from "@/api/intelligent";
import uploadImg from "../components/uploadImg.vue";
export default {
  name: "MvCloudgateTerminalTerminalui",
  components: {
    uploadImg,
  },
  data() {
    return {
      activeValue: 1,
      inActiveValue: 0,
      form: {
        iTitleDisplay: 0,
        sTitle: "",
        iLogoDisplay: 0,
        sLogoPath: "",
        iStartupLogoDisplay: 0,
        showMenuButton: 0,
        sStartupLogoPath: "",
        iTime: 0,
        iIpDisplay: 0,
        iShowDeviceID: 0,
        iShowVersion: 0,
        iDateDisplay: 0,
        iNameMasked: 0,
      },
    };
  },
  created() {
    this.getUIcontrol();
    // var domain = window.location.host;
    // console.log(domain)
  },
  mounted() {},
  methods: {
    reset() {
      this.form.iTitleDisplay = 0;
      this.form.sTitle = "";
      this.form.iLogoDisplay = 0;
      this.form.sLogoPath = "";
      this.form.iStartupLogoDisplay = 0;
      this.form.showMenuButton = 0;
      this.form.sStartupLogoPath = "";
      this.form.iTime = 0;
      this.form.iIpDisplay = 0;
      this.form.iShowDeviceID = 0;
      this.form.iShowVersion = 0;
      this.form.iDateDisplay = 0;
      this.form.iNameMasked = 0;
    },
    getUIcontrol() {
      getUIcontrolApi().then((res) => {
        this.reset();
        this.$nextTick(() => {
          this.form = res;
          this.form.sLogoPath = process.env.VUE_APP_BASE_URL + res.sLogoPath;
          this.form.sStartupLogoPath =
            process.env.VUE_APP_BASE_URL + res.sStartupLogoPath;
          this.form.sLogoPath = res.sLogoPath;
          this.form.sStartupLogoPath = res.sStartupLogoPath;
        });
      });
    },
    onSubmit() {
      console.log(this.form);
      // let formData = new FormData();
      // for (let key in this.form) {
      //   // console.log(this.form[key]);
      //   // console.log(key)
      //   formData.append(key, this.form[key]);
      // }
      editUIcontrolApi(this.form).then((res) => {
        console.log(res);
        this.$message.success("修改成功");
      });
    },
    handlesLogoPathChange(file) {
      // console.log(file);
      const params = new FormData();
      params.append("file", file.raw);
      console.log(123, params);
      editUILogoApi(params).then((res) => {
        this.$message.success("修改成功");
        this.getUIcontrol();
      });
    },
    handlesStartupLogoPathChange(file) {
      const params = new FormData();
      params.append("file", file.raw);
      editStartupLogoApi(params).then((res) => {
        this.$message.success("修改成功");
        this.getUIcontrol();
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
